<template>
  <main class="scene-tree-node">
    <div class="_vti-line" ></div>
    <div v-if="isSingle" class="_single-vt-line"></div>
    <span
      class="g-relative g-one-line node-item"

      @click="clickNode(nodeData?.instanceId)">
      <span v-if="nodeData?.children && nodeData.children.length" class="g-pointer" @click="handleToggleExpand">

        <div class="_rect">
          <div  class="_rect-1"></div>
          <div v-if="!nodeData.expand" class="_rect-2"></div>
        </div>
      </span>
      <span v-else class="_hr-line _empty-line"></span>
      <span class="_hr-line" />
      <img
        v-if="nodeData?.icon"
        :src="nodeData?.icon"
        alt="icon"
        class="_tree-node-icon"
      />
      <span class="node-name"  :class="{_selected: nodeSelect, _selectable: !nodeData?.isSelected}">{{nodeData?.name}}</span>
    </span>
    <div v-show="nodeData?.children && nodeData.expand" class="_sub-node-wrapper">
      <sim-select-tree-node
        v-for="item in nodeData?.children"
        :key="item.instanceId"
        :nodeData="item"
        :selectedId="selectedId"
        :parentId="nodeData?.instanceId"
        :isSingle="nodeData?.children.length === 1"
      />
    </div>
  </main>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "sim-select-tree-node",
  props: {
    parentId: String,
    nodeData: Object,
    isSingle: Boolean,
    selectedId: String,
  },
  computed: {
    nodeSelect() {
      return this.selectedId === this.nodeData?.instanceId;
    }
  },
  methods: {
    handleToggleExpand() {
      if (this.nodeData) this.nodeData.expand = !this.nodeData.expand;
    },
    clickNode(modelId: any){
      if (this.nodeData?.isSelected) {
        if (this.nodeSelect){
          app.$bus.emit("sim-cancel-tree-select");
        } else {
          app.$bus.emit("sim-tree-select", {
            selectedId: this.nodeData?.instanceId,
            parentId: this.parentId
          });
        }
      }
    },
  },
});
</script>
<style lang="scss">
.scene-tree-node {
  position: relative;
  .node-name{
    margin-left: 6px;
    display:inline-block;
    & ._selected {
      color: white;
      background: #3483B8;
    }
    & ._selectable {
      color: gray;
    }
  }
  .node-item{
    cursor: pointer;
  }
	._sub-node-wrapper {
		margin-left: 27px;
		position: relative;
	}
  ._hr-line {
    display: inline-block;
    width: 10px;
    height: 1px;
    border-top: 1px solid black;
    position: relative;
    top: -2px;
  }
  ._rect {
    width: 11px;
    height: 11px;
    box-sizing: border-box;
    border: 1px solid black;
    position: relative;
    display: inline-block;
    background: white;
    top: 2px;
    ._rect-1 {
      position: absolute;
      width: 5px;
      border-top: 1px solid black;
      left: 2px;
      top: 4px;
    }
    ._rect-2 {
      position: absolute;
      height: 5px;
      border-left: 1px solid black;
      left: 4px;
      top: 2px;
    }
  }
}
</style>
